<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="count++">累加</button>
  </div>
</template>

<script>
export default {
  name:'App',
  data(){
    return{
      count:1
    }
  },
  
  /* 
    beforUpdate触发条件:数据已经被修改,视图还没更新
      此时得到的数据和视图展示的数据是不一致的
  */
  beforeUpdate(){
    console.log(this.count);
    debugger
  },


  /* 
    在updated执行之前,vue已经根据新的数据重新渲染得到了一个新的虚拟DOM,然后根据diff算法,修改了真实DOM(视图展示)
      此时数据和视图已经保持一致了
  */
  updated() {
    console.log(this.count);
    debugger
  }

}
</script>

<style>

</style>